<template>
  <div class="stock-tag-list">
    <div class="tag-group" v-for="group in TAG_LIST" :key="group.groupName">
      <div class="tag-group-title">{{ group.groupName }}</div>
      <ul class="tag-list" :class="{ selectable: selectable }">
        <li
          class="tag-item"
          :class="['tag_' + tag.value]"
          v-for="tag in group.list"
          :key="tag.value"
          @click.stop="activedChange(tag.value)"
        >
          <span v-if="!selectable" :style="{ color: tag.value == '0' ? '#1D2129' : '#fff' }"
            >{{ tag.label }}({{ data['num' + tag.value] || 0 }})</span
          >
          <a-checkbox v-else :model-value="activedTag.includes(tag.value)">
            <span :style="{ color: tag.value == '0' ? '#1D2129' : '#fff' }">{{ tag.label }}({{ data['num' + tag.value] || 0 }})</span>
          </a-checkbox>
          <a-tooltip v-if="tag.tooltip" :content="tag.tooltip">
            <icon-question-circle class="tooltip-icon" />
          </a-tooltip>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref } from 'vue'

  // 0:空闲车辆,1:线下订单占用,2:渠道订单占用,3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失
  // 2024-05-10新增：7:临时占用,8:已借出,9:借出未还
  // 2025-06-04：100:用车中,200:待用车
  const ORDER_TAGS: { value: string; label: string; total: number; tooltip?: string }[] = [
    {
      value: '100',
      label: '待用车',
      total: 0,
    },
    {
      value: '200',
      label: '用车中',
      total: 0,
    },
    {
      value: '5',
      label: '车辆冲突',
      total: 0,
    },
    {
      value: '4',
      label: '逾期未还',
      total: 0,
    },
    {
      value: '0',
      label: '无占用车辆',
      total: 0,
    },
  ]
  // 其他标签
  const OTHER_TAGS: { value: string; label: string; total: number; tooltip?: string }[] = [
    {
      value: '7',
      label: '临时占用',
      total: 0,
    },
    {
      value: '3',
      label: '维修',
      tooltip: '在启程创建的维修/逾期未还，不会在渠道占用库存',
      total: 0,
    },
    {
      value: '8',
      label: '已借出',
      total: 0,
    },
    {
      value: '9',
      label: '借出未还',
      total: 0,
    },
  ]

  export default {
    name: 'StockTagList',
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
      // 是否可选
      selectable: Boolean,
    },
    emits: ['change'],
    setup(props, { emit }) {
      const TAG_LIST = [
        { groupName: '订单标签', list: ORDER_TAGS },
        { groupName: '其他标签', list: OTHER_TAGS },
      ]

      const activedTag = ref<string[]>([])
      // 切换tag
      const activedChange = (key: string) => {
        if (!props.selectable) return
        activedTag.value = activedTag.value.includes(key) ? activedTag.value.filter((v) => v !== key) : [...activedTag.value, key]
        emit('change', activedTag.value)
      }

      const reset = () => {
        activedTag.value = []
      }

      return {
        TAG_LIST,
        activedTag,
        activedChange,
        reset,
      }
    },
  }
</script>

<style lang="less" scoped>
  .stock-tag-list {
    width: 100%;
  }
  .tag-group {
    display: flex;
    &-title {
      font-weight: 500;
      font-size: 16px;
      color: #1d2129;
      line-height: 24px;
      margin-right: 12px;
      flex-shrink: 0;
    }
  }
  .tag-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    @import '../tag.less';
    // margin-bottom: 14px;
    &.selectable {
      .tag-item {
        cursor: pointer;
      }
      .channel-list {
        &::before {
          left: 60px;
        }
      }
    }

    .tag-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 20px 20px 0;
      height: 30px;
      // min-width: 124px;
      padding: 0 12px;
      // 文字
      font-size: 14px;
      font-weight: 400;
      color: #1d2129;
    }
  }

  .tooltip-icon {
    margin-left: 2px;
    color: #165dff;
    font-size: 16px;
  }
</style>
